<html>
<head>
<title>Postponer Adder Options</title>

<style>
#content { width: 500px; border: #C90000 solid 10px; border-radius: 10px; background: white; margin-left:auto; margin-right:auto; padding: 10px;}
body {font-family:sans-serif; background: #DDD;}
#logo {float:right; background-image:url(icon128.png); width:128px; height:128px;}
#load {display:block; text-align: center;}
</style>

<script src='jquery.js'></script>
<script src='ril.js'></script>

<script>
// current options
var greader;
var greaderLocation;
var greaderList;
var greaderExpanded;

var oneclick;
var username;
var password;

/**
 * Erases all options stored in local storage
 */
function eraseOptions() {	
	localStorage.removeItem('greader');
	localStorage.removeItem('greaderLocation');
	localStorage.removeItem('greaderList');
	localStorage.removeItem('greaderExpanded');
	
	localStorage.removeItem('oneclick');
	localStorage.removeItem('username');
	localStorage.removeItem('password');
}

/**
 * Loads options stored in local storage, or loads default ones if
 * stored options do not exist or are not valid
 */
function loadOptions() {	
	greader = localStorage['greader'] == 'false' ? false : true;
	$('#greader')[0].checked = greader;
	
	greaderLocation = localStorage['greaderLocation'];
	if (greaderLocation != 'before' && greaderLocation != 'after') {
		greaderLocation = 'before';
	}
	
	if (greaderLocation == 'before') {
		$('#greaderLocationBefore')[0].checked = true;
	}
	else if (greaderLocation == 'after') {
		$('#greaderLocationAfter')[0].checked = true;
	}
	
	greaderList = localStorage['greaderList'] == 'false' ? false : true;
	$('#greaderList')[0].checked = greaderList;
	
	greaderExpanded = localStorage['greaderExpanded'] == 'false' ? false : true;
	$('#greaderExpanded')[0].checked = greaderExpanded;
	
	
	oneclick = localStorage['oneclick'] == 'true' ? true : false;
	$('#oneclick')[0].checked = oneclick;
	
	username = localStorage['username'];
	if (username == 'undefined') {
		username = '';
	}
	$('#username').val(username);
	
	password = localStorage['password'];
	if (password == 'undefined') {
		password = '';
	}
	$('#password').val(password);
}

/**
 * Saves current options to local storage
 */
function saveOptions() {
	localStorage['greader'] = String(greader);
	localStorage['greaderLocation'] = greaderLocation;
	localStorage['greaderList'] = String(greaderList);
	localStorage['greaderExpanded'] = String(greaderExpanded);
	
	localStorage['oneclick'] = String(oneclick);
	localStorage['username'] = username;
	localStorage['password'] = password;
}

$(document).ready(function() {
	loadOptions();
	
	if ($('#greader')[0].checked) $('#greader-options').show();
	else $('#greader-options').hide();	
	
	$('#greader').live('change', function() {
		if ($(this)[0].checked) $('#greader-options').show('slow');
		else $('#greader-options').hide('slow');
		greader = $(this)[0].checked;
		saveOptions();
	});
	
	$('[name=greaderLocation]').live('change', function() {
		if ($(this)[0].checked) greaderLocation = $(this).val();
		saveOptions();
	});
	
	$('#greaderList').live('change', function() {
		greaderList = $(this)[0].checked;
		saveOptions();
	});
	$('#greaderExpanded').live('change', function() {
		greaderExpanded = $(this)[0].checked;
		saveOptions();
	});
	
	if ($('#oneclick')[0].checked) $('#oneclick-options').show();
	else $('#oneclick-options').hide();	
	
	$('#oneclick').live('change', function() {
		if ($(this)[0].checked) $('#oneclick-options').show('slow');
		else $('#oneclick-options').hide('slow');
		oneclick = $(this)[0].checked;
		saveOptions();
	});
	
	$('#username').live('change', function() {
		username = $(this).val();
		saveOptions();
	});
	
	$('#password').live('change', function() {
		password = $(this).val();
		saveOptions();
	});
	
	$('#check').live('click', function() {
		$('#message').text('Checking...');
		ril.authenticate(username, password, function(status) {
			if (status == 200) {
				$('#message').text('Correct');
			}
			else if (status == 401) {
				$('#message').text('Incorrect username or password, try again.');
			}
			else if (status == 403) {
				$('#message').text('API limit exceeded, try again later.');
			}
			else {
				$('#message').text('Unexpected error: ' + status);
			}
		});
	});
	
	$('#erase').live('click', function() { 
		eraseOptions(); 
		location.reload();
	});
});

</script>
</head>

<body>

<div id='content'>
	<span id='logo'></span>
	<h1>Postponer Adder options</h1>
	
	<p>Options are saved automatically.</p>
	
	<h3>Google Reader Integration</h3>
	<p>
		<input type='checkbox' name='greader' id='greader' /><label for='badge'>Show Postponer icon in Google Reader</label>
	</p>
	<div id='greader-options'>
		<p>
			<input type='radio' value='before' name='greaderLocation' id='greaderLocationBefore' />
			<label for='before'>Show icon before title</label>
			<br />
			<input type='radio' value='after' name='greaderLocation' id='greaderLocationAfter' />
			<label for='after'>Show icon after title</label>
		</p>
		<p>
			<input type='checkbox' name='greaderList' id='greaderList' />
			<label for='greaderList'>Show icon in list view</label>
			<br />
			<input type='checkbox' name='greaderExpanded' id='greaderExpanded' />
			<label for='greaderExpanded'>Show icon in expanded view</label>
		</p>	
	</div>
	
	<h3>One-click mode</h3>
	<p>
		<input type='checkbox' name='oneclick' id='oneclick' /><label for='badge'>Add items to Read It Later with one click (requires authentication)</label>
	</p>
	
	<div id='oneclick-options'>
		<p><small><em>Note:</em> One-click mode is not supported in Google Reader; normal add window will be opened there.</small></p>
		<table>
			<tr>
				<td><label for='username'>Username</label></td>
				<td><input type='text' name='username' id='username' /></td>
			</tr>
			<tr>
				<td><label for='password'>Password</label></td>
				<td><input type='password' name='password' id='password' /></td>
			</tr>
		</table>
		<p><button id='check'>Check</button> <span id='message'></span>
	</div>
	
	<h3>Erase Options</h3>
	<p>
		<button id='erase'>Erase all options</button><br />
	</p>
	
	<hr />
	
	<div id='credits'>
	<h3>Credits and License</h3>
	<p>
		<strong>Author</strong><br /> 
		Juliana Pe&ntilde;a <br />
		<a href='http://julianapena.com'>http://julianapena.com</a><br />
		<a href='http://twitter.com/limitedmage'>@limitedmage</a><br />
		If you like this extension, please <a href="http://julianapena.com/donate.html?ref=Postponer%20Adder">buy me a cup of coffee</a>.
	</p>
	<p>
		<strong>Code</strong><br />
		This extension is open source under the <a href='http://creativecommons.org/licenses/GPL/2.0/'>GPLv2</a>. More info at <a href='http://code.google.com/p/chromepostponer/'>Postponer's Google Code page</a>.
	</p>
		
	</div>
</div>

</body>
</html>